<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
    <link rel="stylesheet" href="app.css"></link>
</head>
<body>
<script type="text/javascript">
</script>
<div id="app-1">
    <currency-input v-model="price"></currency-input>
</div>
</body>
<script type="text/javascript">
    Vue.component('currency-input',{
        template:'<span>$<input ref="currencyInput" v-bind:value="value" v-on:input="updateValues($event.target.value)"></span>',
        props:['value'],
        methods:{
            updateValues:function (value) {
                var formattedValue = value.trim().slice(0,value.indexOf('.')+3);
                if(formattedValue!==value){
                    this.$refs.input.value = formattedValue;
                }
                this.$emit('input');
            }
        }
    });
    var app = new Vue({
        el:'#app-1',
        data:{
            price:''
        }
    });
</script>
</html>